My project requires me to get a screenshot from video by random frames.

 let oVideo = document.createElement("video");

  oVideo.setAttribute("src", this.localVideoURL);
  oVideo.setAttribute("controls", "controls");
  oVideo.currentTime = this.randomSecond; //Set the first second frame
  oVideo.load();
  oVideo.addEventListener("canplay", function (event) {
    let oCanvas = document.createElement("canvas");

    oCanvas.width = oVideo.videoWidth;
    oCanvas.height = oVideo.videoHeight;
    oCanvas.getContext("2d").drawImage(oVideo, 0, 0, oCanvas.width, oCanvas.height);

    let base64 = oCanvas.toDataURL("image/png");

    let frameCoverDom = document.getElementById("frameCoverDom");
    frameCoverDom.src = base64;
   
  });

This code works great on Windows and Android except iOS. Some of my friend's iPhone XR works perfectly too. Most iPhone that I tested got a blank image. After comparing my friend's phone and mine, I found that there was a difference on let base64 = oCanvas.toDataURL("image/png").

toDataURL returns:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAUAAAAI4CAYAAAAbCTCbAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAABQKADAAQAAAABAAACOAAAAAAtaf5UAAAMfElEQVR4Ae3QMQEAAADCoPVPbQZ/iEBhwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwI....  

This base64 code contains lots of "ABAwYMGDBgwI", and when I open it on the browser, it's a blank image with proper width and hieght.